<template>
  <div class="statistics-container">

    <div class="page-header">
      <el-select v-model="pumpSelect" placeholder="请选择" clearable value-key="device_id">
        <el-option v-for="item in pumpList" :key="item.device_id" :label="item.device_name" :value="item" />
      </el-select>

      <el-button type="primary" @click="handleClick" style="margin-left:5px">查询</el-button>

    </div>

    <div class="page-content">
      <el-row :gutter="20">
        <el-col :span="14">
          <div class="echarts-container">
            <!-- 健康评分 -->
            <div class="card health-score">
              <div class="card-header">
                <span class="card-title">
                  <i class="el-icon-data-line"></i>
                  健康评分
                </span>
              </div>
              <div class="card-body">
                <HealthRadar />
              </div>
            </div>
            <!-- 告警分析 -->
            <div class="card alarm-analysis">
              <div class="card-header">
                <span class="card-title">
                  <i class="el-icon-warning"></i>
                  告警分析
                </span>
              </div>
              <div class="card-body">
                <AlarmAnalysis></AlarmAnalysis>
              </div>
            </div>
          </div>
          <!-- 历史健康评分 -->
          <div class="card history-health-score">
            <div class="card-header">
              <span class="card-title">
                <i class="el-icon-trend-charts"></i>
                历史健康评分
              </span>
            </div>
            <div class="card-body">
              <HistoryHealthScore></HistoryHealthScore>
            </div>
          </div>
        </el-col>

        <el-col :span="10">
          <div class="page-right">
            <!-- 运行分析模块 -->
            <div class="card running-analysis">
              <div class="card-header">
                <span class="card-title">
                  <i class="el-icon-cpu"></i>
                  运行分析
                </span>
              </div>
              <div class="card-body">
                <div class="runningAnalysisBox">
                  <div class="runningAnalysisItem" v-for="(item, index) in runningAnalysisData" :key="index">
                    <div class="item-icon" :class="`icon-${index}`">
                      <i :class="getIconClass(index)"></i>
                    </div>
                    <div class="item-content">
                      <div class="item-label">{{ item.label }}</div>
                      <div class="item-value">
                        <span class="value-number">{{ formatValue(item.value) }}</span>
                        <span class="value-unit">{{ item.unit }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="runningTimeTrend">
                  <runningTimeTrend></runningTimeTrend>
                </div>
              </div>
            </div>

            <!-- 故障记录 -->
            <div class="card fault-record">
              <div class="card-header">
                <span class="card-title">
                  <i class="el-icon-document"></i>
                  故障记录
                </span>
              </div>
              <div class="card-body">
                <el-table :data="faultRecordData" style="width: 100%" size="small" stripe
                  :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: '500', fontSize: '12px', textAlign: 'center' }"
                  :cell-style="{ fontSize: '12px', padding: '8px 0', textAlign: 'center' }">
                  <el-table-column prop="index" label="序号" width="50" align="center">
                    <template slot-scope="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="description" label="故障描述" align="center" header-align="center"
                    show-overflow-tooltip></el-table-column>
                  <el-table-column prop="reportTime" label="上报时间" align="center"
                    header-align="center"></el-table-column>
                  <el-table-column prop="reportMethod" label="上报方式" align="center"
                    header-align="center"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>


  </div>
</template>

<script>
// 导入健康雷达图组件
import HealthRadar from '@/views/statistics/components/healthRadar.vue'
// 导入告警分析组件
import AlarmAnalysis from '@/views/statistics/components/alarmAnalysis.vue'
// 导入历史健康评分组件
import HistoryHealthScore from '@/views/statistics/components/historyHealthScore.vue'
// 导入运行时间趋势组件
import RunningTimeTrend from '@/views/statistics/components/runningTimeTrend.vue'
// 导入API接口
import { getHostInfo } from '@/views/statistics/api/screenApi'
export default {
  name: 'Statistics',
  components: {
    HealthRadar,
    AlarmAnalysis,
    HistoryHealthScore,
    RunningTimeTrend
  },
  data() {
    return {

      //下拉框选择绑定数据
      pumpSelect: null,
      //下拉框数据
      pumpList: [],

      //运行分析数据
      runningAnalysisData: [
        { label: '总运行时长', value: 0, unit: 'h' },
        { label: '无功功率', value: 0, unit: 'kVar' },
        { label: '有功功率', value: 0, unit: 'kW' },
        { label: '总用电量', value: 0, unit: 'kW·h' },
      ],

      //故障记录数据
      faultRecordData: [
        { description: '电机温度异常电机温度异常电机温度异常电机温度异常电机温度异常', reportTime: '2024-01-15 10:30', reportMethod: '自动' },
        { description: '电压波动过大', reportTime: '2024-01-14 14:20', reportMethod: '手动' },
        { description: '设备运行超时', reportTime: '2024-01-13 09:15', reportMethod: '自动' },


      ]
    }
  },
  mounted() {
    this.loadAllData()
  },
  methods: {

    //初始化数据
    loadAllData() {
      this.loadHostInfo()
    },

    //获取主机信息
    loadHostInfo() {
      getHostInfo().then(res => {
        this.pumpList = res.data.map(item => {
          return {
            device_id: item.device_id,
            device_kg_id: item.device_kg_id,
            device_name: item.device_name,
          }
        })

        // 如果有数据，默认选中第一项
        if (this.pumpList.length > 0 && !this.pumpSelect) {
          this.pumpSelect = this.pumpList[0]
        }
      }).catch(error => {
        console.error('获取主机信息失败:', error)
      })
    },

    //查询
    handleClick() {
      if (!this.pumpSelect) {
        this.$message.warning('请先选择设备')
        return
      }
      console.log('查询设备:', this.pumpSelect)
      // pumpSelect 现在是完整的设备对象，包含 device_id, device_kg_id, device_name
      console.log('设备ID:', this.pumpSelect.device_id)
      console.log('设备名称:', this.pumpSelect.device_name)
      console.log('设备KG ID:', this.pumpSelect.device_kg_id)
    },

    // 格式化数值
    formatValue(value) {
      if (value >= 10000) {
        return (value / 10000).toFixed(2)
      }
      return value.toLocaleString()
    },

    // 获取图标类名
    getIconClass(index) {
      const icons = [
        'el-icon-time',
        'el-icon-lightning',
        'el-icon-thumb',
        'el-icon-data-analysis'
      ]
      return icons[index] || 'el-icon-info'
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/views/statistics/style/screen.scss';
</style>
